<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 管理系统大布局 - Layui</title>
    <!--    <link rel="stylesheet" href="../static/css/teachAffair.css">-->
    <link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
    <!--    <script src="../static/layui/layui.js"></script>-->
    <script src="https://www.layuicdn.com/layui/layui.js"></script>
</head>
<body>
<!--数据表显示，居中排版-->
<div style="text-align: center;">
    <div class="layui-inline">
        <table id="absenceTable" lay-filter="absenceTableFilter" style="margin: 0 auto;"></table>
    </div>
</div>
<script type="text/html" id="barView">
    {{#  if(d.type == '请假'){ }}
    <a class="layui-btn layui-btn-xs" lay-event="">请假</a>
    {{# } }}
    {{#  if(d.type == '缺席'){ }}
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="">缺席</a>
    {{# } }}
</script>
<script th:inline="javascript" charset="UTF-8">
    layui.use('table', function () {
        var teachClassID = getUrlParam("teachClassID");
        // alert(teachClassID);
        var table = layui.table;
        table.render({
            elem: '#absenceTable'
            , height: 'full'
            , url: '/teachAffairManagementForTeacher/getTeachClassAbsenceInfoJson' //数据接口
            , where: {  // 接口的其他参数（自己定义传递的参数）
                teachClassID: teachClassID
            }
            , title: '学生考勤表'
            , page: true //开启分页
            , limit: 10  // 每页显示的条数
            , limits: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]  //每页显示条数的可选择数目
            // ,autoSort: false //禁用前端自动排序
            , initSort: {  //初始化排序方式
                field: 'studentID' //排序字段，对应 cols 设定的各字段名
                , type: 'asc' //排序方式  asc: 升序、desc: 降序、null: 默认排序
            }
            , cols: [
                [
                    {field: 'studentID', title: '学生ID', width: 120, sort: true, align: 'center'}
                    , {field: 'studentName', title: '姓名', width: 120, sort: true, align: 'center'}
                    , {field: 'collegeName', title: '学院', width: 120, sort: true, align: 'center'}
                    , {field: 'majorName', title: '专业', width: 120, sort: true, align: 'center'}
                    , {field: 'grade', title: '年级', width: 100, sort: true, align: 'center'}
                    , {field: 'classNumber', title: '班级', width: 100, sort: true, align: 'center'}
                    , {field: 'date', title: '日期', width: 100, sort: true, align: 'center'}
                    , {field: 'section', title: '节次', width: 100, sort: true, align: 'center'}
                    , {field: 'type', title: '状态', width: 100, sort: true, align: 'center', hide: true}
                    , {fixed: 'right', title: '状态', toolbar: '#barView', width: 100, align: 'center'}

                ]
            ]
        });

        //触发排序事件
        table.on('sort(absenceTableFilter)', function (obj) { //注：sort 是工具条事件名，absenceTableFilter 是 table 原始容器的属性 lay-filter="对应的值"
            console.log(obj.field); //当前排序的字段名
            console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
            console.log(this); //当前排序的 th 对象

            //尽管我们的 table 自带排序功能，但并没有请求服务端。
            //有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
            table.reload('absenceTable', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                    , teachClassID: teachClassID
                }
            });
            // // layer.msg('服务端排序。order by ' + obj.field + ' ' + obj.type);
        });
    });
</script>

<script>
    // 从URL中获取参数
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg); //匹配目标参数
        if (r != null) return unescape(r[2]);//返回参数值
        return null;
    }
</script>
<!--  </div>-->
</body>